<template>
  <div class="rebate">
    <div class="orderList" v-for="(v, i) in list" :key="i">
      <div class="list-title">
        <p class="orderNum"><span>订单号: </span> {{ v.orderNum }}</p>
        <div class="details">
          <span>查看详情</span>
          <img class="arrow" src="../../assets/右箭头.png" alt="" />
        </div>
      </div>

      <div class="list-ticket">
        <p class="name">{{ v.ticketName }}</p>
        <p>
          <span>x</span> <span class="num">{{ v.number }}</span>
        </p>
      </div>

      <div class="consumePrice">
        <p class="price">
          <span>消费总额: </span>
          <span class="num">￥{{ v.consumePrice }}</span>
        </p>
        <p class="date">
          <span>日期: </span>
          <span>{{ v.date }}</span>
        </p>
      </div>

      <div class="commission">
        <p class="price">
          <span>佣金: </span>
          <span class="num">￥{{ v.commission }}</span>
          <span class="await" :class="[
            v.type == '已返佣'
              ? 'returned'
              : v.type == '待返佣'
                ? 'stay'
                : 'refund',
          ]">{{ v.type }}</span>
        </p>

        <div class="purchaser">
          <span>购票人: </span>
          <span class="name">{{ v.purchaser }}</span>
          <img class="avatar" src="../../assets/购票人.png" alt="" />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "rebateOrder", // 返佣订单
  props: {
    list: [],
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.rebate {
  background-color: #f5f5f5;
  padding: 34px 34px 20px;

  .orderList {
    background-color: #ffffff;
    padding: 20px 18px;
    margin-bottom: 20px;

    .list-title {
      @include flex;
      padding-bottom: 16px;
      border-bottom: 1px solid #e1e1e1;

      .orderNum {
        font-size: 24px;
      }

      .details {
        display: flex;
        align-items: center;

        .arrow {
          width: 20px;
          margin-left: 14px;
        }
      }
    }

    .list-ticket,
    .consumePrice,
    .commission {
      @include flex;
    }

    .list-ticket {
      margin-top: 26px;
      margin-bottom: 32px;

      .name {
        margin-left: -10px;
      }
    }

    .consumePrice {
      padding-bottom: 18px;
      border-bottom: 1px solid #e1e1e1;
      margin-bottom: 18px;

      .num {
        color: red;
        margin-left: 8px;
      }
    }

    .commission {
      .num {
        color: red;
        margin-left: 8px;
      }

      .await {
        padding: 8px;
        border: 1px solid #01b182;
        margin-left: 12px;

        border-radius: 2px;
      }

      .returned {
        color: #01b182;
        border: 1px solid #01b182;
        background: rgba(112, 221, 190, 0.15);
      }

      .stay {
        background: rgba(238, 198, 140, 0.1500);
        border: 1px solid #FF9600;
        color: #F88C00;
      }

      .refund {
        color: #909090;
        border: 1px solid #909090;
        background: rgba(192, 192, 192, 0.1500);
      }

      .purchaser {
        display: flex;
        align-items: center;

        .name {
          margin-left: 9px;
        }

        .avatar {
          width: 34px;
          height: 34px;
          margin-left: 20px;
        }
      }
    }
  }
}
</style>